<template>
    <div>
        <Button type="primary" class="ivu-mb-16" @click="handleOpenCreate">新建</Button>
        <Table highlight-row :columns="columns" :data="dataWithPage" :loading="loading" border>
            <template slot="action" slot-scope="{row,index}">
                <a @click="handleEdit(index)">{{row.action[0]}}</a>
                <Divider type="vertical" />
                <a @click="handleDetele(index)">{{row.action[1]}}</a>
            </template>
        </Table>
        <Modal :loading="creating" :mask-closable="false" @on-ok="handleCreate" width="680" :title="addEdit? '新增':'编辑'" v-model="addModal">
            <Form :label-width="100" ref="create" :model="createData" :rules="createRules">
                <FormItem label="名称：" prop="name">
                    <Input v-model="createData.name" placeholder="请输入" />
                </FormItem>
                <FormItem label="API名称：">
                    <Input v-model="createData.apiName" value="account_view_2" />
                </FormItem>
                <FormItem label="描述：" prop="describe">
                    <Input v-model="createData.describe" type="textarea" row="3" />
                </FormItem>
                <FormItem label="范围：">
                    <Checkbox v-width="100" v-model="createData.allRole">所有角色</Checkbox>
                    <Select v-model="createData.role" multiple v-width="360" :disabled="createData.allRole">
                        <Option v-for="item in roleList" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="筛选条件:">
                    <div class="ivu-mb-8" v-for="(item,index) in formDynamic.items" v-show="item.status" :key="index" :prop="'item.' + index + '.value'">
                        <Select v-width="100" placeholder="请选择">
                            <Option v-for="item in formDynamic.fieldList" :value="item.value" :key="item.value">{{item.label}}</Option>
                        </Select>
                        <Select v-width="100" class="ivu-ml-8" placeholder="请选择">
                            <Option v-for="item in formDynamic.countList" :value="item.value" :key="item.value">{{item.label}}</Option>
                        </Select>
                        <Select v-width="200" class="ivu-ml-8">
                            <Option v-for="item in formDynamic.personList" :key="item.value" :value="item.value">{{item.label}}</Option>
                        </Select>
                        <Button type="default" class="ivu-ml-8" @click="handleRemove(index)">删除</Button>
                    </div>
                    <Button type="dashed" icon="md-add" @click="handleAdd">新增</Button>
                </FormItem>
                <FormItem label="默认排序规则">
                    <Select v-width="100" placeholder="请选择">
                        <Option v-for="item in formDynamic.fieldList" :value="item.value" :key="item.value">{{item.label}}</Option>
                    </Select>
                    <RadioGroup class="ivu-ml-8" v-model="formDynamic.sort">
                        <Radio label="升序"></Radio>
                        <Radio label="降序"></Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="显示字段">
                    <Transfer :titles="titles" :data="data2" :target-keys="targetKeys2" filterable :filter-method="filterMethod" @on-change="handleChange2"></Transfer>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
export default {
    data() {
        return {
            addModal: false,
            addEdit: true,
            loading: false,
            creating: true,
            current: 1,
            size: 10,
            updateIndex: -1,
            titles: ['未选择字段', '已选择字段'],
            data2: this.getMockData(),
            targetKeys2: this.getTargetKeys(),
            roleList: [
                {
                    value: '医助',
                    label: '医助'
                },
                {
                    value: '客服',
                    label: '客服'
                },
                {
                    value: '运营',
                    label: '运营'
                }
            ],
            columns: [
                {
                    title: '名称',
                    key: 'name',
                    width: 118,
                    fixed: 'left'
                },
                {
                    title: 'API名称',
                    key: 'apiName',
                    width: 100
                },
                {
                    title: '描述',
                    key: 'describe',
                    width: 150
                },
                {
                    title: '范围',
                    key: 'role',
                    width: 100
                },
                {
                    title: '检索条件',
                    key: 'condition',
                    minWidth: 260
                },
                {
                    title: '排序规则',
                    key: 'tableSort',
                    minWidth: 130
                },
                {
                    title: '操作',
                    key: 'action',
                    slot: 'action',
                    width: 118
                }
            ],
            list: [],
            createData: {
                name: '',
                apiName: '',
                describe: '',
                condition: '',
                role: '',
                tableSort: '',
                allRole: true,
                action: ''
            },
            createRules: {
                name: [
                    {
                        required: true,
                        message: '请输入列表名称',
                        trigger: 'blur'
                    }
                ],
                describe: [
                    {
                        required: true,
                        message: '请输入描述',
                        trigger: 'blur'
                    }
                ]
            },
            formDynamic: {
                sort: '升序',
                items: [
                    {
                        index: 1,
                        status: 1
                    }
                ],
                fieldList: [
                    {
                        value: '姓名',
                        label: '姓名'
                    },
                    {
                        value: '性别',
                        label: '性别'
                    },
                    {
                        value: '年龄',
                        label: '年龄'
                    },
                    {
                        value: '归属人',
                        label: '归属人'
                    },
                    {
                        value: '挂号时间',
                        label: '挂号时间'
                    },
                    {
                        value: '城市',
                        label: '城市'
                    }
                ],
                countList: [
                    {
                        value: '等于',
                        label: '等于'
                    },
                    {
                        value: '不等于',
                        label: '不等于'
                    },
                    {
                        value: '大于等于',
                        label: '大于等于'
                    },
                    {
                        value: '小于等于',
                        label: '小于等于'
                    }
                ],
                personList: [
                    {
                        value: '高玲',
                        label: '高玲'
                    },
                    {
                        value: '王艳',
                        label: '王艳'
                    },
                    {
                        value: '张在峰',
                        label: '张在峰'
                    }
                ]
            }
        }
    },
    computed: {
        limiData() {
            let data = [...this.list]
            return data
        },
        dataWithPage() {
            const data = this.limiData
            const start = this.current * this.size - this.size
            const end = start + this.size
            return [...data].slice(start, end)
        }
    },
    methods: {
        mockOneData() {
            const item = {}
            item.name = '已到列表' + Math.floor(Math.random() * 100)
            item.apiName = 'costor'
            item.role = '所有人'
            item.describe = '列表描述'
            item.condition = '客户.客户所有人 等于 当前用户'
            item.tableSort = '[客户]创建时间'
            item.action = ['编辑', '删除']
            return item
        },
        getData() {
            this.current = 1
            this.loading = true
            setTimeout(() => {
                let data = []
                for (let i = 0; i < 10; i++) {
                    data.push(this.mockOneData())
                }
                this.list = data
                this.loading = false
            }, 1000)
        },
        handleOpenCreate() {
            this.updateIndex = -1
            this.createData.name = ''
            this.createData.apiName = ''
            this.createData.describe = ''
            this.createData.condition = ''
            this.createData.tableSort = ''
            this.addModal = true
        },
        handleCreate() {
            this.$refs.create.validate(valid => {
                if (valid) {
                    if (this.updateIndex < 0) {
                        const mockData = this.mockOneData()
                        mockData.name = this.createData.name
                        mockData.apiName = this.createData.apiName
                        mockData.describe = this.createData.describe
                        mockData.condition = this.createData.condition
                        mockData.tableSort = this.createData.tableSort
                        this.list.splice(0, 0, mockData)
                        this.$Message.success('新增成功')
                    } else {
                        const updateItemName = this.dataWithPage[
                            this.updateIndex
                        ].name
                        const updateItemIndex = this.list.findIndex(
                            item => item.name === updateItemName
                        )
                        this.list[
                            updateItemIndex
                        ].describe = this.createData.describe
                        this.$Message.success('编辑成功')
                    }
                    this.addModal = false
                    this.creating = false
                    this.$nextTick(() => {
                        this.creating = true
                    })
                } else {
                    this.creating = false
                    this.$nextTick(() => {
                        this.creating = true
                    })
                }
            })
        },
        // 编辑数据
        handleEdit(index) {
            this.updateIndex = index
            const item = this.dataWithPage[index]
            this.addEdit = false
            this.createData.name = item.name
            this.createData.apiName = item.apiName
            this.createData.describe = item.describe
            this.addModal = true
        },
        // 删除数据
        handleDetele(index) {
            this.$Modal.confirm({
                title: '删除提示',
                content: '确定删除该任务吗？',
                onOk: () => {
                    this.list.splice(index, 1)
                    this.$Message.success('删除成功')
                }
            })
        },
        handleRemove(index) {
            this.formDynamic.items[index].status = 0
        },
        handleAdd() {
            this.index++
            this.formDynamic.items.push({
                index: this.idex,
                status: 1
            })
        },
        getMockData() {
            let mockData = []
            for (let i = 1; i <= 20; i++) {
                mockData.push({
                    key: i.toString(),
                    label: '字段' + i,
                    disabled: Math.random() * 3 < 1
                })
            }
            return mockData
        },
        getTargetKeys() {
            return this.getMockData()
                .filter(() => Math.random() * 2 > 1)
                .map(item => item.key)
        },
        handleChange2(newTargetKeys) {
            this.targetKeys2 = newTargetKeys
        },
        filterMethod(data, query) {
            return data.label.indexOf(query) > -1
        }
    },
    mounted() {
        this.getData()
    }
}
</script>